<template>
	<view class="content relative">
    <!-- title -->
    <view class="font-size-46 mt-5">{{title}}</view>
    <view class="cu-card article" :class="isCard?'no-card':''">
      <!-- desc -->
      <view class="w-700 p-3 text-justify font-size-26 cu-item text-red bg-red">
        {{ desc }}
      </view>
      <!-- user form -->
      <form class="flex-center">
        <view class="w-700 cu-form-group margin-top" v-for="item in userList">
          <view class="title">{{ item.label }}</view>
          <input :placeholder="item.placeholder" @blur="onchange" name="username" v-model="item.value"/>
        </view>
      </form>
      <view class="w-700 p-2 text-justify font-size-26 cu-item">
        <!-- radio-group -->
        <form>
          <radio-group @change="RadioChange" v-for="(item, index) in selectList" :key="item">
              <!-- radio title -->
              <view class="font-size-30">{{index + 1 + '. '}} {{ item.label }}</view>
              <!-- radio item -->
              <view class="flex my-5 flex-wrap">
                <radio class="my-2" :class="radio == itm.value ?'checked':''" :checked="radio === itm.value ? true : false" v-for="itm in item.value" :value="itm.value">
                  <span class="mx-2 font-size-30">{{ itm.label }}</span></radio>
              </view>
          </radio-group>
        </form>
        <!-- button -->
        <view class="w-700 flex justify-around rtl">
          <!-- reset -->
          <button class="bg-red font-size-32 px-4">{{ reset }}</button>
          <!-- submit -->
          <button class="bg-red font-size-32 px-4">{{ submit }}</button>
        </view>
      </view>
    </view>
    <!-- eject -->
    <view class="fixed-center flex-center bg-[#131313d0] w-700 h-150 rd-2 z-3" v-if="rules[1].required">
      <text class="font-size-36 text-white my-10">{{ rules[1].message }}</text>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        title: 'تۈكشۈرۈش دوكىلاتى',
        submit: 'تاپشۇرۇش',
        reset: 'قايتا تولدۇرۇش',
        rules : [
          { required: true, message: 'ئىسىم-فامىلىڭىزنى كىرگۈزۈڭ', trigger: 'blur' },
          { required: false, message: 'تېلېفون نومۇرىڭىزنى توغرا كىرگۈزۈڭ', trigger: 'blur'},
        ],
				desc: 'ياخشىمۇ سىز، بۇ پەقەت قىسقا فىلىم ھەققىدىكى چۈشەنچىڭى بىلىش ئۈچۈن ئېلىپ بېرىلغان ئادەتتىكى بىر قېتىملىق راي تەكشۈرۈش، راي تەكشۈرۈش نەتىجىسىگە ئاساسەن سىزگە ئەڭ مۇۋاپىق كىلىدىغان تەربىيىلەش ئورۇنلاشتۇرىلىدۇ، شۇڭا تەربىيىلەش مەزمۇنىنىڭ سىزنىڭ ئەمەلىي ئەھۋالىڭىزغا تېخىمۇ ياخشى مۇۋاپىق كىلىشى ئۈچۈن مەزكۈر تۈكشۈرۈش دوكىلاتىنى ئەمەلىي ئەھۋالىڭىزنى چىقىش قىلىپ تولدۇرىشىڭىزنى سورايمىز.',
        userList: [
            {
              label: 'ئىسىم-فامىلىڭىز',
              placeholder: 'ئىسىم-فامىلىڭىزنى كىرگۈزۈڭ ...',
              value: '',
            },
            {
              label: 'تېلېفون نومۇرىڭىز:',
              placeholder: 'تېلېفون نومۇرىڭىزنى كىرگۈزۈڭ ...',
              value: '',
            }
        ],
        selectList: [
            {
              label: 'دوۋيىن نومۇرىڭىز بارمۇ؟',
              value: [{label: 'بار', value: '1'}, {label: 'يوق', value: '0'},],
            },
            {
              label: 'كۈەيشوۋ نومۇرىڭىز بارمۇ؟',
              value: [{label: 'بار', value: '1'}, {label: 'يوق', value: '0'},],
            },
            {
              label: 'شىپىنخاۋ نومۇرىڭىز بارمۇ؟',
              value: [{label: 'بار', value: '1'}, {label: 'يوق', value: '0'},],
            },
            {
              label: 'شىياۋ خوڭشۇ نومۇرىڭىز بارمۇ؟',
              value: [{label: 'بار', value: '1'}, {label: 'يوق', value: '0'},],
            },
            {
              label: 'يوللىغان ئەسىرىڭىزنىڭ كۆرۈلۈش ئەھۋالىنى ئانالىز قىلىشنى بىلەمسىز؟',
              value: [{label: 'ھەئە', value: '1'}, {label: 'ياق', value: '0'},],
            },
            {
              label: 'ئۆزىڭىزنىڭ نومۇرىنى قانداق يۈرگۈزۈشنى پىلانلاپ باققانمۇ؟',
              value: [{label: 'ھەئە', value: '1'}, {label: 'ياق', value: '0'},],
            },
            {
              label: 'فىلىم تارتىش ۋە كىسىشنى بىلەمسىز؟',
              value: [{label: 'ھەئە', value: '1'}, {label: 'ياق', value: '0'},],
            },
            {
              label: 'ئىلگىرى قىسقا فىلىم يۈرگۈزۈش جەھەتتە تەربىيىلىنىپ باققانمۇ؟',
              value: [{label: 'ھەئە', value: '1'}, {label: 'ياق', value: '0'},],
            },
            {
              label: 'قىززىق نوقتىغا تېمىلىرىغا ئەگىشىپ باققانمۇ؟',
              value: [{label: 'ھەئە', value: '1'}, {label: 'ياق', value: '0'},],
            },
            {
              label: 'قىسقا فىلىم يولىغاندا تېما（话题） تاللاشنىڭ زرۈرىيىتى بارمۇ يوق؟',
              value: [{label: 'بار', value: '1'}, {label: 'يوق', value: '0'},],
            },
            {
              label: 'يېڭى نومۇر قوزغاتقاندا كۈن ئاتلاپ يوللاشقا بولامدۇ؟',
              value: [{label: 'بولىدۇ', value: '1'}, {label: 'بولمايدۇ', value: '0'}, {label: 'بىلمەيمەن', value: '2'},],
            },
            {
              label: 'باشقىلارنىڭ ئەسىرىنى چۈشۈرۈپلا قايتا يوللىساق بولامدۇ؟',
              value: [{label: 'بولىدۇ', value: '1'}, {label: 'بولمايدۇ', value: '0'}, {label: 'بىلمەيمەن', value: '2'},],
            },
{
              label: 'ئۆزىمىزنىڭ ئەسىرىنى ئوخشاش سۇپىغا تەكرار يوللىساق بولامدۇ؟',
              value: [{label: 'بولىدۇ', value: '1'}, {label: 'بولمايدۇ', value: '0'}, {label: 'بىلمەيمەن', value: '2'},],
            },
            {
              label: 'فىلىمنىڭ ئوخشىمىغان ۋاقىتتا يوللىسا كۆرۈلۈشى ئوخشىمايدۇ دېگەن قاراشقا قانداق قارايسىز؟',
              value: [{label: 'قۇشۇلىمەن', value: '1'}, {label: 'قۇشۇلمايمەن', value: '0'}, {label: 'بىلمەيمەن', value: '2'},],
            },
            {
              label: 'يۇقاردا ئېيتىلغان سۇپىلاردىن ئادەتتە قانداق پايدىلىنىسىز؟',
              value: [{label: 'پەقەتلا كۆرىمەن', value: '1'}, {label: 'ئۆزۈمنىڭ تىجارىتىنىڭ تەشۋىقاتىنى قىلىمەن', value: '0'}, {label: 'ئۆزەم خالىغان نەرسىنى يوللاپ قويىمەن   بىۋاستە كۆرسىتىش قىلىمەن', value: '2'},],
            },
            {
              label: 'يۇقاردا ئېيتىلغان سۇپىلاردىكى ئۇمۇمىي ئەگەشكۈچى سانىڭىز؟',
              value: [{label: 'مىڭدىن تۆۋەن', value: '1'}, {label: 'مىڭدىن بەش مىڭغىچە', value: '0'}, {label: 'بەش مىڭدىن ئونمىڭغىچە', value: '2'},{label: 'ئون مىڭدىن يۇقىرى', value: '3'},],
            },
            {
              label: 'يۇقاردا ئېيتىلغان سۇپىلارغا فىلىم يوللاش ئۇسۇلىڭىز قانداق؟',
              value: [
                  {
                    label: 'بىۋاستە ئەپنى ئېچىپلا كۆرگىنىمنى خالىغانچە تارتىپ يوللايمەن',
                    value: '1'
                  },
                  {
                    label: 'باشقىلارنىڭ فىلىمىنى چۈشۈرۈپلا قايتا يوللايمەن',
                    value: '0',
                  },
                  {
                    label: 'بىۋاستە ئەپنى ئېچىپلا كۆرگىنىمنى سۈپەتلىك تارتىپ يوللايمەن',
                    value: '2',
                  },
                  {
                    label: 'ئاۋال سۈرەتكە ئېلۋېلىپ جىيەنيىڭ دېگەندەك دېتاللاردا كىسىپ يوللايمەن',
                    value: '3',
                  },
              ],
            },
            {
              label: 'فىلىم يوللاشقا ئىلھام ئىزدەشكە چۈشەنچىڭىز قانداق؟',
              value: [
                  {
                    label: 'ئۆزەم توغرا دەپ قارىغاننى قىلىمەن',
                    value: '1'
                  },
                  {
                    label: 'ئوخشاش تۈردىكى نومۇرلاردىن پايدىلىنىمەن',
                    value: '0',
                  },
                  {
                    label: 'نېمە جىق كۆرۈلسە شۇنى دورايمەن',
                    value: '2',
                  },
                  {
                    label: 'چۈشەنمەيمەن',
                    value: '3',
                  },
              ],
            },
            {
              label: 'قىسقا فىلىمنىڭ ئەڭ مۇھىم ئورنى قەيەر؟',
              value: [
                  {
                    label: 'بېشىدىكى ئىككى سىكونت',
                    value: '1'
                  },
                  {
                    label: 'بېشىدىكى بەش سىكونت',
                    value: '0',
                  },
                  {
                    label: 'تۇلۇق كۆرۈلۈشى',
                    value: '2',
                  },
                  {
                    label: 'ئاخىرقى قىسىمى',
                    value: '3',
                  },
              ],
            },
            {
              label: 'قىسقا فىلىم نومۇرىمىزغا تېمىنى قانداق تاللايمىز؟',
              value: [
                  {
                    label: 'قانداق تېمىدىكى مەزمۇن بولسا شۇنى يوللىساق بولىدۇ',
                    value: '1'
                  },
                  {
                    label: 'نېمە مودا بولسا ئېقىمغا ئەگىشىپ يوللايمىز',
                    value: '0',
                  },
                  {
                    label: 'ئۆزىمىزنىڭ كەسپىنى چىقىش قىلىپ تېما تاللايمىز',
                    value: '2',
                  },
                  {
                    label: 'يوللىغىمىز كەلگەننى يوللا ۋىرىمىز',
                    value: '3',
                  },
              ],
            },
            {
              label: 'تەشۋىقات خارەكتىردىكى مەزمۇنلارنى قانداق تەييارلايمىز؟',
              value: [
                  {
                    label: 'نېمىنى تەشۋىق قىلماقچى بولساق شۇنى بىۋاستە دەيمىز',
                    value: '1'
                  },
                  {
                    label: 'ئاۋال باشقىلارنى تۇتۇپ تۇرغىدەك مەزمۇن قوشىمىز',
                    value: '0',
                  },
                  {
                    label: 'مەھسۇلاتنى قانچە بىۋاستە ئىپادىلىسە شۇنچە ياخشى',
                    value: '2',
                  },
                  {
                    label: 'ئۆزىمىزنىڭ نېمىش قىلىدىغانلىقىنى بىلدۈرسەكلا بولدى',
                    value: '3',
                  },
              ]
            },
            {
              label: 'قىسقا فىلىم ئېقىم مىقدارى بىلەن بىۋاستە كۆرسىتىش ئېقىم مىقدارىنىڭ مۇناسىۋىتى بارمۇ؟',
              value: [
                  {
                    label: 'ئىككىسى ئىككى ئېقىم كۆلچىكىدە، مۇناسىۋىتى يوق',
                    value: '1'
                  },
                  {
                    label: 'ئەگەشكۈچى كۆپ بولسا بىۋاستە كۆرسىتىشكە ئېقىمنى كۆپ بىرىدۇ',
                    value: '0',
                  },
                  {
                    label: 'ئەگەشكۈچى ئاز بولسا بىۋاستە كۆرسىتىشكە ئېقىمنى كۆپ بىرىدۇ',
                    value: '2',
                  },
                  {
                    label: 'ئىككىسى ئايرىم كۆلچەكتە، مۇناسىۋىتى بولمىسىمۇ، ئەگەشكۈچى ئاز بولسا بىۋاستە كۆرسىتىش ئېقىمى ئاز بولىدۇ',
                    value: '3',
                  },
              ]
            },
        ],
			}
		},
		onLoad() {

		},
		methods: {
      onchange(e){
        let values = e.detail.value;
        const phoneReg = /^[1][3-9]\d{9}$/;
        let Phonebool = phoneReg.test(values);
        if (!Phonebool) {
          this.rules[1].required = true;
          console.log(e)
          values = '';
          setTimeout(() => {
            this.rules[1].required = false;
          }, 2000);
        }
        console.log(e);
      },
		}
	}
</script>

<style>
	.content {
		display: flex;
    direction: rtl;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

</style>
